<template>
  <div class="hello">
    <div class="dropEl">
      <el-form ref="form" :rules="rules" :model="data">
        <el-form-item
          label="任务名称"
          label-width="78px"
          class="custom-form-item"
          prop="taskName"
        >
          <el-input
            v-model="data.taskName"
            placeholder="请填写任务名称"
            style="width: 55%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="任务描述"
          class="custom-form-item"
          prop="dsc"
          label-width="78px"
        >
          <el-input
            type="textarea"
            v-model="data.dsc"
            placeholder="请填写任务描述"
            style="width: 55%"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="任务类型"
          label-width="78px"
          class="custom-form-item"
          prop="jobType"
        >
          <el-select
            style="width: 55%"
            v-model="data.jobType"
            placeholder="请选择任务类型"
          >
            <el-option
              v-for="f in dict.type.check_tasktype"
              :key="f.value"
              :label="f.label"
              :value="f.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label-width="78px"
              label="任务模式"
              class="custom-form-item"
              prop="start"
            >
              <el-select
                style="width: 100%"
                v-model="data.start"
                placeholder="请选择一个起始向导"
              >
                <template v-for="f in dict.type.data_base_type">
                  <el-option
                    :key="f.value"
                    :label="f.label"
                    :value="f.value"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1"> <i class="el-icon-right"></i></el-col>
          <el-col :span="8">
            <el-form-item class="custom-form-item" prop="start">
              <el-select
                style="width: 67%"
                v-model="data.end"
                placeholder="请选择一个结束向导"
              >
                <template v-for="f in dict.type.data_base_type">
                  <el-option
                    :key="f.value"
                    :label="f.label"
                    :value="f.value"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="任务状态"
          class="custom-form-item"
          prop="status"
          label-width="78px"
        >
          <el-radio-group v-model="data.status">
            <el-radio
              v-for="dict in dict.type.sys_job_status"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  dicts: ["data_base_type", "sys_job_status", "check_tasktype"],
  name: "HelloWorld1",
  mapMutations: ["getData"],
  props: ["data"],
  data() {
    return {
      rules: {
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择任务状态", trigger: "blur" },
        ],
        start: [{ required: true, message: "请选择起始源", trigger: "change" }],
        end: [{ required: true, message: "请选择目标源", trigger: "change" }],
        jobType: [
          { required: true, message: "请选择任务模式", trigger: "change" },
        ],
      },
    };
  },
  created() {
    if (!this.$props.data.status) {
      Vue.set(this.$props.data, "status", "0");
    }
  },
  methods: {
    changeDatabase(v) {
      this.$props.data[v == "start" ? "sourceId" : "sinkId"] = "";
    },
  },
};
</script>

<style scoped lang="scss">
.hello {
  width: 100%;
}
.dropEl {
  width: 100%;
  margin: 30px auto;
  border: 1px solid #dcdfe6;
  padding: 40px;
}

.nextButton {
  margin: 40px auto;
  width: 87%;
  text-align: center;
}

.el-col-1 {
  margin-top: 5px !important;
}
</style>
